<template>
    <div class="terminal-container common-card" :class="[themeType]">
        <public-title title="健康终端报警" :themeType="themeType">
            <template #right>
                <!--                <span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>-->
            </template>
        </public-title>
        <div class="inner">
            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
                <div class="item right-top-item" :class="themeType" v-for="(item, i) in scrollList" :key="i">
                    <span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
                    <span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
                    <div class="time-icon">
                        <span>{{ item?.warnTime }}</span>
                        <span class="terminal-icon" @click="handlePolice(item)" title="健康报警员工信息"></span>
                        <span class="position" @click="sendPosition(item)" title="员工定位"></span>
                    </div>
                </div>
            </vue3-seamless-scroll>
        </div>
        <Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
            <template #container>
                <div class="police-con" :class="[themeType]">
                    <div class="con-item">
                        <div>姓名：</div>
                        <div>{{ userInfo?.realName }}</div>
                    </div>
                    <div class="con-item">
                        <div>二级单位：</div>
                        <div>{{ userInfo?.orgName1 }}</div>
                    </div>
                    <div class="con-item">
                        <div>手机号码：</div>
                        <div>{{ userInfo?.phone }}</div>
                    </div>
                    <div class="con-item">
                        <div>异常事件：</div>
                        <div>{{ userInfo?.eventType_dictText }}</div>
                    </div>
                    <div class="con-item">
                        <div>异常值：</div>
                        <div>{{ userInfo?.dataValue }}</div>
                    </div>
                    <div class="con-item">
                        <div>发生时间：</div>
                        <div>{{ userInfo?.warnTime }}</div>
                    </div>
                    <div class="con-item">
                        <div>发生地点：</div>
                        <div v-if="userInfo?.address">{{ userInfo?.address }}</div>
                        <div style="color: #eb3636" v-else>{{ userInfo?.gpsErrorMsg }}</div>
                    </div>
                </div>
            </template>
        </Dialog>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import { useRouter } from 'vue-router';
    import PublicTitle from '/@/components/publicTitle.vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
    import { Map } from '/@/assets/mapUtils/map.ts';
    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
    import { DataType } from '/@/utils/settings.ts';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
    import { message } from 'ant-design-vue';
    import { right1 } from '/@/views/yinChuanTest/mockData.ts';

    const props = defineProps({
        setting: Object,
    });
    const { themeType } = useTheme();
    const emit = defineEmits(['emit-view-detail']);
    const router = useRouter();
    const { setSession, getSession } = useSession();
    const { RIGHT_KEY1 } = caching;

    const classOption = ref({
        step: 0.3, // 速度
    });
    const openInfor = ref<boolean>(false); //弹窗显示
    const userInfo = ref({
        realName: '',
        orgName1: '',
        phone: '',
        eventType_dictText: '',
        warnTime: '',
        address: '',
        dataValue: '',
    });
    onMounted(() => {
        getScrollList();
    });

    /**
     * @desc open员工信息
     */
    function handlePolice(item) {
        userInfo.value = item;
        openInfor.value = true;
        classOption.value.step = 0;
    }

    /**
     * @desc close员工信息
     */
    function handlePoliceClose() {
        openInfor.value = false;
        classOption.value.step = 0.3;
    }

    /**
     * @desc 终端报警
     * */
    const scrollList = ref([]);

    async function getScrollList() {
        try {
            const { code, result } = right1;
            if (code == 200) {
                setSession(RIGHT_KEY1, JSON.stringify(result.records));
                scrollList.value = result.records;
            }
        } catch {
            scrollList.value = JSON.parse(getSession(RIGHT_KEY1));
        }
    }

    function sendPosition(item) {
        let { lon, lat } = item;
        if (lon && lat) {
            Map.createMarker(item, () => {
                handlePolice(item);
            });
        } else {
            message.warn('暂无经纬度信息！');
        }
    }

    function viewDetail() {
        if (props.setting.dataType == DataType.xian) {
            router.push({ path: '/secondScreen' });
        }
        if (props.setting.dataType == DataType.yinChuan) {
            emit('emit-view-detail');
        }
    }
</script>
<style scoped lang="less">
    .right-text {
        font-weight: 100;
        cursor: pointer;
        margin-right: 3px;
        font-size: 18px;
    }

    .right-text.light {
        color: #667ecc;
    }

    .right-text:hover {
        color: #129bff;
    }

    .inner {
        height: calc(100% - 40px);
        display: flex;
        align-items: center;
        justify-content: center;

        .scroll {
            width: 98%;
            height: 88%;
            overflow: hidden;

            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 3% 0;

                .time-icon {
                    display: flex;
                    align-items: center;
                }

                .terminal-icon {
                    margin-left: 15px;
                    display: inline-block;
                    width: 18px;
                    height: 18px;
                    background-size: 100% 100%;
                    cursor: pointer;
                }

                .position {
                    width: 18px;
                    height: 18px;
                    background-size: 100% 100%;
                    margin-left: 5px;
                    display: inline-block;
                    cursor: pointer;
                }
            }
        }
    }

    .police-con {
        padding: 2% 0 2% 5%;

        .con-item {
            padding: 1.3% 0;
            display: flex;

            div:nth-child(1) {
                font-weight: bold;
                width: 100px;
                text-align: right;
            }

            div:nth-child(2) {
                width: calc(100% - 100px);
            }
        }
    }
</style>
<!--<style lang="less">-->
<!--    .dialog-con {-->
<!--        background-color: #00152b;-->
<!--        //  antd表格样式-->
<!--        .ant-table-thead > tr > th {-->
<!--            //border-bottom: 1px solid #1e73c2 !important;-->
<!--        }-->

<!--        .ant-table-body {-->
<!--            background-color: #00152b !important;-->
<!--        }-->

<!--        .ant-modal-header {-->
<!--            border-bottom: none !important;-->
<!--        }-->

<!--        .ant-table-tbody > tr > td {-->
<!--            border-bottom: 1px solid #1e73c2 !important;-->
<!--            background-color: #00152b !important;-->
<!--            color: #ffffff !important;-->
<!--        }-->

<!--        .ant-table-tbody > tr.ant-table-row:hover > td,-->
<!--        .ant-table-tbody > tr > td.ant-table-cell-row-hover,-->
<!--        .ant-table-thead > tr > th {-->
<!--            background-color: #00152b !important;-->
<!--            color: #ffffff !important;-->
<!--        }-->

<!--        .ant-table-cell-scrollbar {-->
<!--            box-shadow: none !important;-->
<!--        }-->

<!--        /*-->
<!--表格滚动条-->
<!--*/-->

<!--        .ant-table-body::-webkit-scrollbar-thumb {-->
<!--            border: 4px solid rgba(0, 0, 0, 0);-->
<!--            height: 6px;-->
<!--            border-radius: 25px;-->
<!--            background-clip: padding-box;-->
<!--            background-color: rgba(30, 115, 194, 0.3);-->
<!--        }-->
<!--    }-->
<!--</style>-->
